<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel>
      <el-carousel-item v-for="b in bannerArr">
        <img :src="b" alt="" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>

    <el-row style="background-color: white;">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘培食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu :default-active="1" active-text-color="orange" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">全部</el-menu-item>
          <el-menu-item index="2">面包</el-menu-item>
          <el-menu-item index="3">零食</el-menu-item>
          <el-menu-item index="4">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" style="margin: 10px 0">
        <el-card class="box-card">
          <img src="/imgs/a.jpg" style="width: 100%;height: 145px" alt="">
          <p>奶油面包</p>
          <el-row :gutter="20">
           <el-col :span="4">
             <el-avatar src="/imgs/head.jpg" :size="35"></el-avatar>
           </el-col>
           <el-col :span="20">
             <p style="margin-top: 10px">汤姆
             <span style="font-size: 12px;color: #666;float:right">面包</span>
             </p>
           </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button type="primary">加载更多</el-button>
    </div>

    <el-row style="background-color: white;">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘培食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu :default-active="1" active-text-color="orange" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">全部</el-menu-item>
          <el-menu-item index="2">面包</el-menu-item>
          <el-menu-item index="3">零食</el-menu-item>
          <el-menu-item index="4">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" style="margin: 10px 0">
        <el-card class="box-card">
          <img src="/imgs/a.jpg" style="width: 100%;height: 145px" alt="">
          <p>奶油面包</p>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar src="/imgs/head.jpg" :size="35"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">汤姆
                <span style="font-size: 12px;color: #666;float:right">面包</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button type="primary">加载更多</el-button>
    </div>

    <el-row style="background-color: white;">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘培食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu :default-active="1" active-text-color="orange" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">全部</el-menu-item>
          <el-menu-item index="2">面包</el-menu-item>
          <el-menu-item index="3">零食</el-menu-item>
          <el-menu-item index="4">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" style="margin: 10px 0">
        <el-card class="box-card">
          <img src="/imgs/a.jpg" style="width: 100%;height: 145px" alt="">
          <p>奶油面包</p>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar src="/imgs/head.jpg" :size="35"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">汤姆
                <span style="font-size: 12px;color: #666;float:right">面包</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button type="primary">加载更多</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";

const bannerArr = ref(["/imgs/banner1.jpg", "/imgs/banner2.jpg", "/imgs/banner3.jpg"])
</script>

<style scoped>

</style>